<template>
  <div id="home">
    <el-container style="height: 100%">
      <el-aside width="200px">
        <div class="logo">
          <img src="../assets/img/logo.6f4321c1.png" alt="" />
        </div>
        <el-menu
          
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <router-link to="/home"
            ><el-menu-item index="0">
              <template slot="title"><i class="el-icon-menu"></i>首页</template>
            </el-menu-item></router-link
          >

          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-shop"></i>商品</template>
            <el-menu-item-group>
              <router-link to="/type"
                ><el-menu-item index="1-1"
                  ><i class="el-icon-s-marketing"></i>品类管理</el-menu-item
                ></router-link
              >
              <router-link to="/product/productlist"
                ><el-menu-item index="1-2"
                  ><i class="el-icon-shopping-cart-full"></i
                  >商品管理</el-menu-item
                ></router-link
              >
              <router-link to="/spec"
                ><el-menu-item index="1-3"
                  ><i class="el-icon-paperclip"></i>规格属性</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-user"></i>用户</template>
            <el-menu-item-group>
              <router-link to="/user"
                ><el-menu-item index="2-1"
                  ><i class="el-icon-s-custom"></i>用户管理</el-menu-item
                ></router-link
              >
              <router-link to="/role"
                ><el-menu-item index="2-2"
                  ><i class="el-icon-setting"></i>权限管理</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-platform-eleme"></i>订单</template
            >
            <el-menu-item-group>
              <router-link to="/order/orderList"
                ><el-menu-item index="3-1"
                  ><i class="el-icon-phone-outline"></i>订单管理</el-menu-item
                ></router-link
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <i class="el-icon-user-solid" style="margin-right: 15px"></i>
          <span>{{ userInfo }}</span>
          <template>
            <el-button type="text" @click="open">退出登录</el-button>
          </template>
        </el-header>
        <el-main>
          <!-- <home-item></home-item> -->
          <router-view />
        </el-main>
        <el-footer>Created By Fiora At 2019.07</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// import HomeItem from '../components/HomeItem'
export default {
  data() {
    return {
      charts: "",
    };
  },
  components: {
    //   HomeItem
  },
  methods: {
    open() {
      this.$confirm("确定退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push("/login");
        })
        .catch(() => {});
    },
  },

  computed: {
    userInfo() {
      if (!this.$store.state.userInfo.data) {
        return localStorage.getItem("name");
      }
      return this.$store.state.userInfo.data.username;
    },
  },
};
</script>
    
<style>
* {
  padding: 0;
  margin: 0;
}
a:-webkit-any-link {
  text-decoration: none;
}
#home {
  height: 100vh;
}
#home .el-header {
  background-color: #ffffff;
  color: #333;
  line-height: 60px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}
#home .el-aside {
  color: #ffffff;
  background: rgb(43, 46, 51);
}
#home .el-menu {
  color: #ffffff;
  background-color: rgb(43, 46, 51);
  border: none;
}
#home .el-button {
  font-size: 12px;
  margin-left: 10px;
}
#home .el-footer {
  /* width: 100%; */
  line-height: 60px;
  text-align: center;
  font-size: 14px;
  background-color: #f3f3f3;
}
#home .el-menu-item.is-active {
  color: rgb(255, 208, 75);
  background-color: rgb(43, 46, 51);
}
#home .el-menu-item {
  color: #ffffff;
}
#home.el-submenu__title {
  color: #ffffff;
}
#home .el-submenu__title:hover,
#home .el-menu-item:hover {
  color: #ffffff;
  background-color: rgb(34, 37, 41);
}
.el-submenu .el-menu-item {
  min-width: 0;
}
.logo {
  text-align: center;
  padding: 10px 0;
}
.logo img {
  width: 160px;
  height: 40px;
}
.el-icon-arrow-down:nth-child(1) {
  display: none;
}
</style>